import { FC } from "react"
import { WebsiteInfoCardPropType } from "./types"
import styles from './styles.module.less'
import { Icon, Image } from 'magic-ui-react'
import { useAppDispatch } from "@/utils/hooks"
import { appConfigActions } from "@/store/appConfigSlice"

const WebsiteInfoCard = (porps: WebsiteInfoCardPropType) => {
  const {
    websiteInfo,
    ...rest
  } = porps

  const dispatch = useAppDispatch()

  const addWebsitePartFn = () => {
    dispatch(appConfigActions.addWebsitePart({
      type: 'website',
      typeProps: {
        title: websiteInfo.title,
        icon: websiteInfo.iconUrl,
        harf: websiteInfo.url
      }
    }))
  }

  return (
    <div
      className={`${styles.websiteInfoCard}`}
      {...rest}
    >
      <header className="flex gap10 align-center">
        <Image width={30} height={30} src={websiteInfo.iconUrl} />
        <div>{websiteInfo.title}</div>
      </header>
      <p className={`${styles.description}`}>
        {websiteInfo.description}
      </p>
      <aside className={styles.options}>
        <div
          onClick={() => {
            window.open(websiteInfo.url)
          }}
        >
          <Icon icon="globe" size={16}></Icon>
        </div>
        <div onClick={() => addWebsitePartFn()}>
          <Icon icon="plus" size={16}></Icon>
        </div>
      </aside>
    </div>
  )
}

export default WebsiteInfoCard